<template>
  <div id="intro" class="home-intro">
    <Row>
      <i-col :xs="{ span: 0 }" :sm="{ span: 0 }" :md="{ span: 12 }" :lg="{ span: 14 }">
        <div class="intro-content">
          <h1>Welcome to Happy Team</h1>
          <p class="intro-summary">Happy Team 开源项目是基于SpringBoot, vue2.0, webpack的快速开发框架。 </p>
          <p class="intro-li"><Icon type="checkmark-round" :size="20" ></Icon> 前后端完全分离</p>
          <p class="intro-li"><Icon type="checkmark-round" :size="20" ></Icon> 性能优异</p>
          <p class="intro-li"><Icon type="checkmark-round" :size="20" ></Icon> 代码生成</p>
        </div>
      </i-col>
      <i-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 12 }" :lg="{ span: 10 }">
      <div class="intro-img">
        <img src="../../assets/pc.png" alt="PC dashboard">
      </div>
      </i-col>
      <i-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 0 }" :lg="{ span: 0 }">
      <h1>Welcome to Happy Team</h1>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import NotificationBar from './Notification'
  import BreadCrumb from '../Breadcrumb'

  export default {
    components: {
      BreadCrumb,
      NotificationBar
    },
    name: 'intro-panel',
    data: function () {
      return {msg: ''}
    },
    computed: {},
    methods: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-intro{
    width: 90%;
    display: table;
    padding-top: 30px;
    padding-left: 30px;
  }
  .intro-content{
    display: block;
    padding-left: 30px;
  }
  .intro-content h1{
    color: rgba(76, 76, 76, 0.8);
    font-size: 30px;
    margin: 0 0 20px;
    text-transform: lowercase;
  }
  .intro-img{
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    text-align: right;
  }

  .intro-img img{
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-Index:-1;
  }
  .intro-summary{
    font-size: 16px;
    font-weight: bold;
    font-family: "Aktiv Grotesk W01 Bold1370651", sans-serif;
    color: rgba(0, 0, 0, 0.87);
  }

  .intro-li{
    font-size: 14px;
    font-weight: normal;
  }
</style>
